see:

http://wise4-qa.telscenter.org/vlewrapper/vle/node/draw/svg-edit-2.4rc1/all.js
http://wise4-qa.telscenter.org/vlewrapper/vle/node/draw/svg-edit-2.4rc1/svg-editor.html

—

Step 1:

in svg-editor.html, the window.onload event handler fires a 'pageRenderComplete' event (passing in its node ID, which is a string like 'node 3.sd', using the nodeId variable which is presumably global within the iframe)

Step 2:

the Node.prototype.pageRenderComplete handler calls the loadContent() method of the 'content panel' (i.e., svg-editor.html) with the node object as an argument

Step 3:

svg-editor.html's loadContent() method calls the scriptloader's loadScripts method

Step 4:

The scriptloader loads the script and css files required by 'svgdraw' (the dependencies are hard-coded into an array contained in the scriptloader.js file)

(the one script required is all.js)

Step 5:

When the last line of all.js (line 788) executes, it causes a scriptLoaded event to fire:

  if(typeof eventManager != 'undefined'){
  	eventManager.fire('scriptLoaded', 'vle/node/draw/svg-edit-2.4rc1/all.js');
  };

Step 6:

the scriptLoaded listener, once all dependencies are loaded, fires the 'scriptsLoaded' event
(NOTE PLURAL!-- this is a different event than 'scriptLoaded')

Step 7:

It appears that there are many listeners to the scriptsLoaded event. For example each 'node' (item in the left-hand menu, like 'Step 2: mySystem' or 'Step 3: Draw Step 2' in the wise4 test site) appears to register as a listener with Node.prototype.loadContentAfterScriptsLoaded() as the callback.

In this case, the Node.prototype.loadContentAfterScriptsLoaded() callback is called.

Step 8:

The Node.prototype.loadContentAfterScriptsLoaded() callback calls the loadContentAfterScriptsLoaded() function in the 'content panel', i.e. (in this case) the loadContentAfterScriptsLoaded() function of svg-editor.html

Step 9:

The SVGDRAW constructor is called (the new SVGDRAW object is made available as a global called 'svgdraw')

Step 10:

The last step of the SVGDRAW constructor calls the init() method of the svgdraw object with the 'ContentUrl' of the svgdraw 'node' as the argument. I believe the content url contains json data for the node (ie., the particular svgdraw 'node' in the VLE that is starting up)

Step 11:

The init function calls svg_edit_setup() which creates the svgcanvas object (in vanilla svg-edit-2.4rc1, this step is done at document.ready without any of the above steps)

Step 12:

The init function then calls SVGDRAW.prototype.loadModules which gets the JSON data from the 'content url' and sets the stamp, snapshot, description, instruction, and default image state.

It then sets the 'dataService' property of the SVGDRAW object to a new VleDS object

(VleDS is defined in all.js, which takes the definition from svg-editor.js)

Step 13:

The load() method of the SVGDRAW object is called, which calls the load() methods of the dataService object. The SVGDRAW object's loadCallback is passed as the callback.

Step 14:

The VleDS load() method sets its 'data' property to the data returned by the VLE's getLatestStateForCurrentNode() method

Step 15:

The SVGDRAW object's loadCallback method is called with the argument 'studentWorkJSON' set to the data returned by the VleDS. This is apparently the step that actually loads the student's prior work into the SVG canvas...

(Step 16:

SVGDRAW's initDisplay() method is called to "populate instructions, stamp images, description/annotation text, and snapshots" in the actual display)

additional notes:

to see the 'stamp tool' in action, click "Step 1: Draw Step 1" on the wise4 beta test site project. This tool doesn't seem to be active for the other steps.